<template>
  <div id="order-detail" v-if="info">
    <c-title text="订单详情"></c-title>
    <!-- 个人订单 -->
    <div class="top-address-pane" v-if="type == 'individual'">
      <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/anytime_service/icon_local (1).png" alt="" class="img-icon">
      <div class="right-detail">
        <div class="name">{{ detailData.order_address.realname }}（{{ detailData.order_address.mobile }}）</div>
        <div class="address-name">{{ detailData.order_address.address }}</div>
      </div>
    </div>
    <div class="order-detail" v-if="type == 'individual'">
      <div class="order-sn">
        <span class="order-sn-color">订单号：{{ detailData.order_sn }}</span>
        <!-- <span class="order-sn-status">{{ detailData.status_name }}</span> -->
        <span
          :class="
            detailData.status_name == '待审核' || detailData.status_name == '待接单'
              ? 'order-sn-status order-waite-color'
              : detailData.status_name == '待服务' || detailData.status_name == '超时关闭'
              ? 'order-sn-status order-service-color'
              : 'order-sn-status'
          "
          >{{ detailData.status_name }}</span
        >
      </div>
      <div class="appointment-time">
        <span class="time-name">{{detailData.need_type == 0 ? '服务时间' : '预约时间'}}</span>
        <van-icon name="star" class="star-icon" />
        <span class="ture-time" v-if="detailData.need_type == 1">{{ detailData.start_time_str.split(" ")[0] }} ({{ detailData.start_time_str.split(" ")[1] }})</span>
        <span class="ture-time" v-if="detailData.need_type == 0">{{ detailData.start_time_str }} - {{ detailData.finish_time_str }}</span>
      </div>
      <div class="tec-pane">
        <img :src="detailData.image_url" alt="" />
        <div class="tec-right">
          <div class="tec-name">{{ detailData.title }}</div>
          <div class="tec-content" ref="tec_text">
            <span class="icon-cop" v-if="show_more"></span>
            <van-icon name="arrow-down" class="icon-1" v-if="show_more" @click="show_more = false" />
            <div :class="show_more ? 'tec-content-more' : ''">
              {{ detailData.need_type == 0 ? "服务内容" : "需求简介"}}: {{ detailData.content }}
              <van-icon name="arrow-up" v-if="show_icon" @click="show_more = true" />
            </div>
          </div>
          <div class="service-charge">服务费 ￥{{ detailData.service_fee }}</div>
        </div>
      </div>
    </div>
    <div class="master-pane" v-if="type == 'individual' && detailData.has_one_shifu">
      <img :src="detailData.has_one_shifu.personal_pic" alt="" v-if="detailData.has_one_shifu.personal_pic"/>
      <div class="right-detail">
        <div class="master-name">{{ detailData.has_one_shifu.realname }}</div>
        <a :href="`tel:${detailData.has_one_shifu.mobile}`">
          <div class="master-mobile">联系电话: {{ detailData.has_one_shifu.mobile }}</div>
        </a>
      </div>
    </div>
    <!-- 企业订单 -->
    <div class="enterprise-pane" v-if="type == 'enterprise'">
      <div class="order-sn enterprise-order">
        <span class="order-sn-color">订单号：{{detailData.order_sn}}</span>
        <span
          :class="
            detailData.status_name == '待审核' || detailData.status_name == '待接单'
              ? 'order-sn-status order-waite-color'
              : detailData.status_name == '待服务' || detailData.status_name == '超时关闭'
              ? 'order-sn-status order-service-color'
              : 'order-sn-status'
          "
          >{{ detailData.status_name }}</span
        >
      </div>
      <div class="tec-pane">
        <img :src="detailData.has_one_category.thumb_url" alt="" />
        <div class="tec-right">
          <div class="tec-name">{{detailData.title}}</div>
          <div class="tec-content" ref="tec_text">
            <span class="icon-cop" v-if="show_more"></span>
            <van-icon name="arrow-down" class="icon-1" v-if="show_more" @click="show_more = false" />
            <div :class="show_more ? 'tec-content-more' : ''">
              描述: {{detailData.content}}
              <van-icon name="arrow-up" v-if="show_icon" @click="show_more = true" />
            </div>
          </div>
        </div>
      </div>
      <div class="information-cost" v-if="detailData.has_one_package.type == 11">
        <span class="cost-name">{{detailData.has_one_package.type_name}}</span>
        <span class="cost-value">￥{{detailData.has_one_package.type == 11 ?  detailData.amount*1 - detailData.headline_fee*1 : detailData.has_one_package.fee}}</span>
      </div>
      <div class="information-cost">
        <span class="cost-name">置顶费用</span>
        <span class="cost-value">￥{{detailData.headline_fee}}</span>
      </div>
      <div class="information-cost">
        <span class="cost-name">合计</span>
        <span class="cost-value cost-total">￥{{detailData.amount}}</span>
      </div>
    </div>
    <div class="time-line" v-if="detailData.has_one_order.status > 0">
      <div class="time-box" v-if="detailData.has_one_order.status > 0">
        <div class="spa-line">
          <span class="circle"></span>
          <span class="line" v-if="detailData.audit_time"></span>
        </div>
        <div class="time-name">付款时间</div>
        <div class="true-time">{{ detailData.has_one_order.pay_time }}</div>
      </div>
      <div class="time-box" v-if="detailData.audit_time">
        <div class="spa-line">
          <span class="circle"></span>
          <span class="line" v-if="detailData.accept_time"></span>
        </div>
        <div class="time-name">审核时间</div>
        <div class="true-time">{{ detailData.audit_time }}</div>
      </div>
      <div class="time-box" v-if="detailData.accept_time">
        <div class="spa-line">
          <span class="circle"></span>
          <span class="line" v-if="detailData.complete_time"></span>
        </div>
        <div class="time-name">接单时间</div>
        <div class="true-time">{{ detailData.accept_time }}</div>
      </div>
      <div class="time-box" v-if="detailData.complete_time">
        <div class="spa-line">
          <span class="circle"></span>
          <span class="line" v-if="detailData.close_time"></span>
        </div>
        <div class="time-name">完成时间</div>
        <div class="true-time">{{ detailData.complete_time }}</div>
      </div>
      <div class="time-box" v-if="detailData.close_time">
        <div class="spa-line">
          <span class="circle"></span>
        </div>
        <div class="time-name">关闭时间</div>
        <div class="true-time">{{ detailData.close_time }}</div>
      </div>
    </div>
    <!-- 已完成 并评价完 才显示 -->
    <div class="evaluation-detail" v-if="type == 'individual' && detailData.publish_comment && detailData.need_type == 1">
      <span>评价</span>
      <div>
        <van-icon name="star" class="evaluation-star" v-for="item in detailData.publish_comment.star_grade" :key="item" />
      </div>
    </div>
    <div class="evaluation-detail" v-if="type == 'individual' && detailData.shifu_comment && detailData.need_type == 0">
      <span>评价</span>
      <div>
        <van-icon name="star" class="evaluation-star" v-for="item in detailData.shifu_comment.star_grade" :key="item" />
      </div>
    </div>

    <div v-if="detailData.button_models.length > 0" :class="[this.fun.getPhoneEnv() == 3 ? 'pcStyle bottom-bar' : 'bottom-bar']">
      <span
        :class="citem.value == 'pay' ? 'evaluation-card pay-sty' : citem.value == 'publish' ? 'mine-evaluation' : citem.value == 'receive' ? 'evaluation-card' : 'evaluation-card cancal-sty'"
        v-for="(citem, cindex) in detailData.button_models"
        @click.stop="evenButtonModels(citem)"
        >{{ citem.name }}</span
      >
    </div>

    <evaluation-popup :evaluation_show.sync="evaluation_show" :order_id="detailData.order_id" @commentEvent="commentEvent"></evaluation-popup>
  </div>
</template>
<script>
import order_detail_controller from "./order_detail_controller";

export default order_detail_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.pcStyle {
  width: 375px !important;
}

#order-detail {
  padding-bottom: 5rem;

  .top-address-pane {
    background: white;
    padding: 0.6rem;
    margin-top: 0.6rem;
    display: flex;
    align-items: center;

    .right-detail {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 0.4rem;
      text-align: left;
      line-height: 1;

      .name {
        font-size: 0.8rem;
        font-weight: 400;
        color: #333;
      }

      .address-name {
        margin-top: 0.5rem;
        font-size: 0.7rem;
        font-weight: 400;
        color: #999;
      }
    }
  }

  .order-detail {
    background: white;
    padding: 0.6rem;
    margin-top: 0.4rem;

    .order-sn {
      display: flex;
      justify-content: space-between;

      .order-waite-color {
        color: #ff9c43 !important;
      }
      // 待服务
      .order-service-color {
        color: #f84949 !important;
      }

      .order-sn-status {
        font-size: 0.75rem;
        font-weight: 400;
        color: #333;
      }

      .order-sn-color {
        font-size: 0.75rem;
        font-weight: 400;
        color: #999;
      }
    }

    .appointment-time {
      padding: 0.6rem 0.6rem 0.6rem 0;
      border-top: 0.025rem solid #e7e7e7;
      text-align: left;
      margin-top: 0.4rem;
      line-height: 1;

      .time-name {
        font-size: 0.85rem;
        font-weight: 400;
        color: #333;
      }

      .star-icon {
        color: #f84949;
        zoom: 0.4;
        vertical-align: super;
        margin-left: 0.1rem;
      }

      .ture-time {
        font-size: 0.85rem;
        font-weight: 400;
        color: #4978f8;
        margin-left: 0.4rem;
      }
    }

    .tec-pane {
      background: rgba(245, 245, 245, 0.39);
      border-radius: 0.2rem;
      padding: 0.6rem;
      display: flex;

      img {
        width: 3.6rem;
        height: 3.6rem;
        background: rgba(232, 232, 232, 0.39);
        border-radius: 0.2rem;
        margin: 0;
      }

      .tec-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: left;
        margin-left: 0.3rem;
        width: calc(100% - 3.6rem);

        .tec-name {
          font-size: 0.8rem;
          font-weight: 400;
          color: #333;
          margin-bottom: 0.2rem;
        }

        .tec-content {
          font-size: 0.7rem;
          font-weight: 400;
          color: #999;
          position: relative;
          line-height: 1.5;
        }

        .service-charge {
          font-size: 0.75rem;
          font-weight: 400;
          color: #ff9c43;
          margin-top: 0.2rem;
        }
      }
    }

    .evaluation-pane {
      width: 100%;
      text-align: right;
      margin-top: 0.6rem;
      margin-bottom: 0.4rem;

      .evaluation-card {
        background: rgb(73, 120, 248);
        border-radius: 0.875rem;
        color: white;
        padding: 0.3rem 1rem;
      }
    }
  }

  .master-pane {
    background: white;
    padding: 0.6rem;
    margin-top: 0.6rem;
    display: flex;

    img {
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      margin: 0;
    }

    .right-detail {
      margin-left: 0.2rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text-align: left;

      .master-name {
        font-size: 0.8rem;
        font-weight: bold;
        color: #333;
      }

      .master-mobile {
        font-size: 0.7rem;
        font-weight: 400;
        color: #999;
      }
    }
  }

  .enterprise-pane {
    background: white;
    padding: 0.6rem;
    margin-top: 0.4rem;

    .order-sn {
      display: flex;
      justify-content: space-between;

      .order-waite-color {
        color: #ff9c43 !important;
      }
      // 待服务
      .order-service-color {
        color: #f84949 !important;
      }

      .order-sn-status {
        font-size: 0.8rem;
        font-weight: 400;
        color: #333;
      }

      .order-sn-color {
        font-size: 0.8rem;
        font-weight: 400;
        color: #999;
      }
    }

    .enterprise-order {
      margin-bottom: 0.6rem;
    }

    .tec-pane {
      background: rgba(245, 245, 245, 0.39);
      border-radius: 0.2rem;
      padding: 0.6rem;
      display: flex;

      img {
        width: 3.6rem;
        height: 3.6rem;
        background: rgba(232, 232, 232, 0.39);
        border-radius: 0.2rem;
        margin: 0;
      }

      .tec-right {
        display: flex;
        flex-direction: column;
        text-align: left;
        margin-left: 0.3rem;
        width: calc(100% - 3.6rem);
        margin-top: 0.3rem;

        .tec-name {
          font-size: 0.8rem;
          font-weight: 400;
          color: #333;
          margin-bottom: 0.5rem;
          // line-height: 1.8rem;
          // height: 1.8rem;
        }

        .tec-content {
          font-size: 0.7rem;
          font-weight: 400;
          color: #999;
          line-height: 1.5;
          position: relative;
        }
      }
    }

    .information-cost {
      display: flex;
      justify-content: space-between;

      .cost-name {
        font-size: 0.7rem;
        font-weight: 400;
        color: #333;
        margin-top: 0.6rem;
      }

      .cost-value {
        font-size: 0.7rem;
        font-weight: 400;
        color: #999;
        margin-top: 0.6rem;
      }

      .cost-total {
        color: #ff9c43 !important;
      }
    }
  }

  .time-line {
    padding: 0.6rem 0.6rem 0 1.6rem;
    background: white;
    margin-top: 0.6rem;

    .time-box-border {
      border-bottom: none !important;
    }

    .time-box {
      display: flex;
      flex-direction: column;
      border-bottom: 0.025rem solid #e7e7e7;
      margin-bottom: 0.6rem;

      .spa-line {
        position: relative;

        .circle {
          width: 0.5rem;
          height: 0.5rem;
          border-radius: 50%;
          border: 0.15rem solid #4978f8;
          display: block;
          position: absolute;
          left: -0.9rem;
          top: 0.3rem;
        }

        .line {
          width: 0.1rem;
          height: 3.2rem;
          display: block;
          background: rgba(73, 120, 248, 0.39);
          position: absolute;
          left: -0.7rem;
          top: 0.8rem;
        }
      }

      .time-name {
        font-size: 0.8rem;
        font-weight: 400;
        color: #333;
        text-align: left;
      }

      .true-time {
        font-size: 0.8rem;
        font-weight: 400;
        color: #999;
        padding: 0.3rem 0 0.7rem 0;
        text-align: left;
      }
    }
  }

  .evaluation-detail {
    padding: 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 400;
    color: #333;
    margin-top: 0.6rem;
    background: white;

    .evaluation-star {
      color: #ff9c43;
    }
  }

  .bottom-bar {
    display: flex;
    text-align: right;
    background: white;
    padding: 0.4rem 0.6rem;
    justify-content: flex-end;
    position: fixed;
    width: 100%;
    bottom: 0;
    // .sure-line {
    //   background: rgb(73,120,248);
    //   border-radius: 1.025rem;
    //   padding: 0.325rem 1.475rem;
    //   color: white;
    // }
    .mine-evaluation {
      background: rgb(73, 120, 248);
      border-radius: 1.025rem;
      padding: 0.325rem 0;
      width: inherit;
      color: white;
      text-align: center;
    }

    .evaluation-card {
      background: rgb(73, 120, 248);
      border-radius: 0.875rem;
      color: white;
      padding: 0.5rem 1.2rem;
      margin: 0 0.225rem;
      line-height: 1;
    }

    .cancal-sty {
      border: 0.05rem solid #909090;
      color: #909090 !important;
      background: white !important;
      padding: 0.45rem 1rem !important;
    }

    .pay-sty {
      background-color: #f14e4e !important;
      color: #fff !important;
    }
  }

  .img-icon {
    width: 1rem !important;
    height: 1rem !important;
    margin: 0;
  }

  .tec-content-more {
    width: 93%;
    white-space: nowrap;
    overflow: hidden;
  }

  .icon-cop {
    position: absolute;
    right: 0.8rem;
    top: 0.2rem;
    text-align: right;
    width: 0.8rem;
    height: 1.2rem;
    display: block;
    background: rgba(245, 245, 245, 0.69);
  }

  .icon-1 {
    position: absolute;
    right: 0.2rem;
    top: 0;
    text-align: right;
    line-height: 1.5;
  }
}
</style>
